<%@ page contentType="text/html;charset=UTF-8" %>
<%@ taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c" %>
<%@ taglib prefix="fn" uri="http://java.sun.com/jsp/jstl/functions" %>
<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>销售订单管理 - 电动车销售系统</title>
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/css/bootstrap.min.css" rel="stylesheet">
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap-icons@1.10.0/font/bootstrap-icons.css">
    <link rel="stylesheet" href="${pageContext.request.contextPath}/css/purchase.css">
    <link rel="stylesheet" href="${pageContext.request.contextPath}/css/salesadmin/saleslist.css">
</head>
<body>
<header class="dashboard-header">
    <div class="container">
        <div class="d-flex justify-content-between align-items-center">
            <div>
                <h1 class="h3 mb-0"><i class="bi bi-bicycle me-2"></i> 电动车销售管理系统</h1>
                <p class="mb-0 opacity-75">销售订单管理</p>
            </div>
            <div class="d-flex align-items-center">
                <div class="me-3">
                    <span class="d-none d-md-inline">${currentUser.name}</span>
                    <div class="badge bg-light text-dark">
                        <i class="bi bi-person-circle me-1"></i> 销售管理员
                    </div>
                </div>
                <div class="dropdown">
                    <button class="btn btn-light rounded-circle p-1" type="button" data-bs-toggle="dropdown">
                        <i class="bi bi-gear fs-5"></i>
                    </button>
                    <ul class="dropdown-menu dropdown-menu-end">
                        <li><a class="dropdown-item" href="${pageContext.request.contextPath}/change_password.jsp"><i class="bi bi-lock me-2"></i> 修改密码</a></li>
                        <li><hr class="dropdown-divider"></li>
                        <li><a class="dropdown-item text-danger" href="${pageContext.request.contextPath}/LogoutServlet"><i class="bi bi-box-arrow-right me-2"></i> 退出登录</a></li>
                    </ul>
                </div>
            </div>
        </div>
    </div>
</header>

<div class="container py-4">
    <!-- 成功消息提示 -->
    <c:if test="${not empty param.msg}">
        <div class="alert alert-success alert-dismissible fade show mb-4" role="alert">
            <i class="bi bi-check-circle me-2"></i> ${param.msg}
            <button type="button" class="btn-close" data-bs-dismiss="alert" aria-label="Close"></button>
        </div>
    </c:if>

    <div class="d-flex justify-content-between align-items-center mb-4">
        <div>
            <h2 class="h4 mb-0"><i class="bi bi-receipt me-2 text-primary"></i> 销售订单管理</h2>
            <p class="text-muted mb-0">所有销售订单信息</p>
        </div>
        <a href="salesAdmin?action=addForm" class="btn btn-primary">
            <i class="bi bi-plus-circle me-1"></i> 添加新订单
        </a>
    </div>

    <!-- 搜索框 -->
    <div class="dashboard-card shadow">
        <div class="card-header">
            <h5 class="card-title"><i class="bi bi-search me-2 text-primary"></i> 订单搜索</h5>
            <p class="card-subtitle">根据订单ID查询订单信息</p>
        </div>
        <div class="card-body">
            <form action="salesAdmin" method="get" class="search-container">
                <input type="hidden" name="action" value="list"/>
                <input type="text" name="id" placeholder="输入订单ID..." required value="${param['id']}">
                <button type="submit">
                    <i class="bi bi-search"></i>
                </button>
            </form>
        </div>
    </div>

    <!-- 订单表格卡片 -->
    <div class="dashboard-card shadow">
        <div class="card-header d-flex justify-content-between align-items-center">
            <div>
                <h5 class="card-title"><i class="bi bi-list me-2 text-primary"></i> 订单列表</h5>
                <p class="card-subtitle">所有销售订单信息</p>
            </div>
            <div class="text-muted small">
                <c:if test="${not empty sales}">
                    共 ${fn:length(sales)} 条订单
                </c:if>
            </div>
        </div>
        <div class="card-body p-0">
            <c:choose>
                <c:when test="${not empty sales}">
                    <div class="table-responsive">
                        <table class="sales-table">
                            <thead>
                            <tr>
                                <th>订单ID</th>
                                <th>客户ID</th>
                                <th>销售员ID</th>
                                <th>车辆ID</th>
                                <th>数量</th>
                                <th>销售时间</th>
                                <th>状态</th>
                                <th>操作</th>
                            </tr>
                            </thead>
                            <tbody>
                            <c:forEach items="${sales}" var="sale">
                                <tr>
                                    <td>${sale.id}</td>
                                    <td>${sale.customerId}</td>
                                    <td>${sale.userId}</td>
                                    <td>${sale.vehicleId}</td>
                                    <td>${sale.quantity}</td>
                                    <td>${sale.saleTime}</td>
                                    <td>
                                        <c:choose>
                                            <c:when test="${sale.status == 0}">
                                                <span class="status-badge status-pending">未出库</span>
                                            </c:when>
                                            <c:when test="${sale.status == 1}">
                                                <span class="status-badge status-approved">已出库</span>
                                            </c:when>
                                        </c:choose>
                                    </td>
                                    <td>
                                        <div class="action-buttons">
                                            <a href="salesAdmin?action=editForm&id=${sale.id}"
                                               class="btn btn-sm btn-outline-primary">
                                                <i class="bi bi-pencil"></i> 编辑
                                            </a>
                                            <a href="salesAdmin?action=delete&id=${sale.id}"
                                               class="btn btn-sm btn-outline-danger"
                                               onclick="return confirm('确认删除该订单吗？')">
                                                <i class="bi bi-trash"></i> 删除
                                            </a>
                                        </div>
                                    </td>
                                </tr>
                            </c:forEach>
                            </tbody>
                        </table>
                    </div>
                </c:when>
                <c:otherwise>
                    <div class="empty-state py-4 text-center">
                        <i class="bi bi-receipt fs-1 text-muted"></i>
                        <p class="mt-3">暂无订单数据</p>
                        <c:if test="${not empty param.id}">
                            <div class="alert alert-warning mt-3">
                                <i class="bi bi-exclamation-circle me-2"></i> 未找到ID为 ${param.id} 的订单
                            </div>
                        </c:if>
                    </div>
                </c:otherwise>
            </c:choose>
        </div>
    </div>
</div>

<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/js/bootstrap.bundle.min.js"></script>
<script>
    // 自动关闭消息提示
    document.querySelectorAll('.alert .btn-close').forEach(button => {
        button.addEventListener('click', function() {
            this.closest('.alert').style.display = 'none';
        });
    });

    // 5秒后自动关闭消息提示
    setTimeout(() => {
        document.querySelectorAll('.alert').forEach(alert => {
            alert.style.display = 'none';
        });
    }, 5000);

    // 表格行悬停效果
    document.querySelectorAll('.sales-table tbody tr').forEach(row => {
        row.addEventListener('mouseenter', function() {
            this.style.backgroundColor = '#f8f9fa';
        });

        row.addEventListener('mouseleave', function() {
            this.style.backgroundColor = '';
        });
    });
</script>
</body>
</html>